<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul class="breadcrumb">
                <li>
                    <a href="/">Home</a>
                </li>
                <li>
                    <a href="/wwfw/ywsjtj">运维服务/数据统计与分析</a>
                </li>
                <li class="active">
                    数据统计与分析
                </li>
            </ul>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 col-md-offset-1">
                <form class="form-inline">
                    选择统计日期段：
                    <div class="form-group">
                        <label class="sr-only" for="dtp1">选择开始日期</label>
                        <div class="input-group">
                            <div class="input-group-addon">Start</div>
                            <input type="text" class="form-control" id="dtp1" placeholder="开始日期" data-date-format="yyyy-mm-dd">
                            <!--div class="input-group-addon">.00</div-->
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="dtp2">选择结束日期</label>
                        <div class="input-group">
                            <div class="input-group-addon">End</div>
                            <input type="text" class="form-control" id="dtp2" placeholder="结束日期" data-date-format="yyyy-mm-dd">
                            <!--div class="input-group-addon">.00</div-->
                        </div>
                    </div>
                    <button type="button" class="btn btn-default" onclick="select_date_submit()">点我进行数据统计</button>
                </form>
            </div>
        </div>
        <p />
        <div class="row clearfix" style="height:500px;">
            <div id="Chart1" style="height:490px;width:100%;"></div>
        </div>
        <p/>
        <div class="row clearfix" style="height:500px;">
            <div id="Chart2" style="height:490px;width:100%;"></div>
        </div>
        <div class="row clearfix">
            <div id="Chart3" style="height:490px;width:100%;"></div>
        </div>
        <div class="row clearfix">
            <div id="Chart4" style="height:500px;width:100%"></div>
        </div>
    </div>
</div>
<script language="javascript" type="text/javascript" src="/static/js/echarts.js"></script>
<script language="javascript" type="text/javascript" src="/static/js/xmgl.js"></script>
<script type="text/javascript">
    var $start_date,
        $end_date; //定义时间

    function select_date_submit() {
        //提交日期
        //alert("改变了日期！");
        //$start_date = $('#dtp1').val();
        //$end_date = $('#dtp2').val();

        //转换时间为UNIX时间，与GOLANG要兼容的话，要除以1000，得到的UNIX时间是8:00
        $start_date = Date.parse($('#dtp1').val()) / 1000;
        //转换结束时间为UNIX时间，与GOLANG要兼容的话，要除以1000，得到的UNIX时间是8:00
        $end_date = Date.parse($('#dtp2').val()) / 1000;
        //console.log("开始时间UNIX：" + Date.parse($('#dtp1').val()));

        refresh_chart1($start_date, $end_date);
        refresh_chart2($start_date, $end_date);
        refresh_chart3($start_date, $end_date);
        refresh_chart4($start_date, $end_date);
    };

    function refresh_chart1($start_date, $end_date) {
        //刷新chart1
        //alert("开始日期：" + $start_date);
        $.ajax({
            type: "Get",
            dataType: "json",
            url: '/api/v1/wwfw/ywsjtj/GZFLHZ', ///api/v1/wwfw/ywsjtj/test是测试数据
            data: {
                start_date: $start_date, //在golang里，用this.GetString("start_date")就能取到传递的值了
                end_date: $end_date
            },
            success: function(res) {
                if (res == null) {
                    console.log("返回数据是空的：" + res); //返回的是JSON数据
                } else {
                    console.log("返回有数据：" + res);
                    myChart1_option = res;
                    myChart1.setOption(myChart1_option);
                }
            }, //success
            error: function(res) {
                //出现错误！
                console.log("ajax出错！");
            }
        }); //$.ajax
    };

    function refresh_chart2($start_date, $end_date) {
        //刷新chart2
        $.ajax({
            type: "Get",
            dataType: "json",
            url: '/api/v1/wwfw/ywsjtj/GZSBHZ', ///api/v1/wwfw/ywsjtj/test是测试数据
            data: {
                start_date: $start_date, //在golang里，用this.GetString("start_date")就能取到传递的值了
                end_date: $end_date
            },
            success: function(res) {
                if (res == null) {
                    console.log("返回数据是空的：" + res); //返回的是JSON数据
                } else {
                    console.log("返回有数据：" + res);
                    myChart2_option = res;
                    myChart2.setOption(myChart2_option);
                }
            }, //success
            error: function(res) {
                //出现错误！
                console.log("ajax出错！");
            }
        }); //$.ajax
    };

    function refresh_chart3($start_date, $end_date) {
        //刷新chart3
        $.ajax({
            type: "Get",
            dataType: "json",
            url: '/api/v1/wwfw/ywsjtj/JSRHZ', ///api/v1/wwfw/ywsjtj/test是测试数据
            data: {
                start_date: $start_date, //在golang里，用this.GetString("start_date")就能取到传递的值了
                end_date: $end_date
            },
            success: function(res) {
                if (res == null) {
                    console.log("返回数据是空的：" + res); //返回的是JSON数据
                } else {
                    console.log("返回有数据：" + res);
                    myChart3_option = res;
                    myChart3.setOption(myChart3_option);
                }
            }, //success
            error: function(res) {
                //出现错误！
                console.log("ajax出错！");
            }
        }); //$.ajax
    };

    function refresh_chart4($start_date, $end_date) {
        //刷新chart4，饼图
        $.ajax({
            type: "Get",
            dataType: "json",
            url: '/api/v1/wwfw/ywsjtj/CLFSHZ', ///api/v1/wwfw/ywsjtj/test是测试数据
            data: {
                start_date: $start_date, //在golang里，用this.GetString("start_date")就能取到传递的值了
                end_date: $end_date
            },
            success: function(res) {
                //alert(res.series_data);
                if (res == null) {
                    console.log("返回数据是空的：" + res); //返回的是JSON数据
                } else {
                    console.log("返回有数据：" + res);
                    myChart4_option = {
                        /*title: {
                        	text: res.title_text
                        },
                        /*legend: {
                        	data: res.lengend_data
                        },*/
                        series: [{
                            data: res.series_data
                        }]
                    };
                    myChart4.setOption(myChart4_option);
                }
            }, //success
            error: function(res) {
                //出现错误！
                console.log("ajax出错！");
            }
        }); //$.ajax
    };
    //定义百度图表柱状图形数据选项
    var option1 = {
        color: ['#3398DB'],
        title: {
            text: '按工单类别(故障类型)统计',
            left: 'center'
        },
        grid: {
            y2: 140, //让X轴文字显示完整
            left: '3%',
            right: '4%',
            bottom: '9%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { //坐标轴指示器，坐标轴触发有效
                type: 'shadow' //默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: [''] //data: ['工单分类汇总','test']
        },
        xAxis: {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                interval: 0, //让X轴文字显示完整，横轴信息全部显示  
                rotate: -30, //让X轴文字显示完整，-30度角倾斜显示  
            },
            data: []
        },
        yAxis: {},
        series: [{
            name: '',
            type: 'bar',
            barWidth: '60%',
            data: []
        }]
    };
    //定义百度图表饼图数据选项
    var option_pie = {
        title: {
            text: '按处理方式汇总统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: []
        },
        series: [{
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            roseType: 'angle', //显示成南丁格尔图
            data: [{
                value: 335,
                name: 'test1'
            }, {
                value: 310,
                name: 'test2'
            }],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            itemStyle: {
                normal: {
                    // 阴影的大小
                    shadowBlur: 200,
                    // 阴影水平方向上的偏移
                    shadowOffsetX: 0,
                    // 阴影垂直方向上的偏移
                    shadowOffsetY: 0,
                    // 阴影颜色
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
        }]
    };

    var myChart1 = echarts.init(document.getElementById('Chart1'));
    myChart1.setOption(option1);
    var myChart2 = echarts.init(document.getElementById('Chart2'));
    myChart2.setOption(option1);
    var myChart3 = echarts.init(document.getElementById('Chart3'));
    myChart3.setOption(option1);
    var myChart4 = echarts.init(document.getElementById('Chart4'));
    myChart4.setOption(option_pie);

    $('#dtp1').datetimepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        minView: "month",
        todayBtn: "linked",
        todayHighlight: true,
        language: "zh-CN",
    });
    $('#dtp2').datetimepicker({
        format: 'yyyy-mm-dd',
        autoclose: true,
        minView: "month",
        todayBtn: "linked",
        todayHighlight: true,
        language: "zh-CN",
    });

    $(function() {
        //初始化
        $('#dtp1').val(now());
        $('#dtp2').val(now());
    });
</script>